<template>
    <div id="container" style="width: 100%; height: 100%;" />
</template>

<script>
import { mapKey } from '@/config/settings'
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
    name: 'BaseMap',
    props: {
        option: {
            type: Object,
            default: () => ({})
        },
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            const defaultOption = {
                key: mapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
                version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: [
                    'AMap.Scale'
                ]// 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }
            const option = { ...defaultOption, ...option }
            AMapLoader.load(option).then((AMap) => {
                const map = new AMap.Map('container', { zoom: 11 })
                // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
                map.addControl(new AMap.Scale())
                this.$emit('load', map, AMap)
            }).catch(e => {
                console.log(e)
            })
        }
    }
}
</script>

<style lang="scss" scoped >
// 去除高德地图默认logo
::v-deep {
    .amap-logo {
        display: none !important;
        visibility: hidden !important;
    }
    .amap-copyright {
        display: none !important;
        visibility: hidden !important;
    }
    // .amap-info-content {
    //     background: #222;
    //     color: #fff;
    //     font-size: 14px;
    //     border-radius: 5px;
    //     padding-left: 18px;
    // }
    // .bottom-center .amap-info-sharp {
    //     border-top: 8px solid #222;
    // }
    .amap-info-close {
        display: none;
    }
}
</style>
